<template>
    <ul v-if="theme.showThemeSetting" class="vab-theme-setting">
        <li @click="handleOpenTheme">
            <a>
                <vab-icon icon="brush-2-line"/>
                <p>{{ translate('主题配置') }}</p>
            </a>
        </li>
        <li @click="randomTheme">
            <a>
                <vab-icon icon="apps-line"/>
                <p>{{ translate('随机换肤') }}</p>
            </a>
        </li>
        <li @click="removeLocalStorage">
            <a>
                <vab-icon icon="delete-bin-4-line"/>
                <p>
                    {{ translate('清理缓存') }}
                </p>
            </a>
        </li>
    </ul>
</template>

<script lang="ts">
import {Component} from 'vue-property-decorator';
import BaseVue from "@/common/base-vue";
import {SettingsGetterEnum} from '@/store/enum/store.enum'

@Component({components: {}})
export default class VabThemeSetting extends BaseVue {
    get theme() {
        return this.$store.getters[SettingsGetterEnum.theme]
    };

    private handleOpenTheme() {
        this.$bus.$emit('theme')
    };

    private randomTheme() {
        this.$bus.$emit('random-theme')
    };

    private removeLocalStorage() {
        localStorage.clear()
        location.reload()
    };
}
</script>

<style lang="scss" scoped>
.vab-theme-setting {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: $base-z-index + 1;
    padding: 10px 0 0 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    background: $base-color-white;
    border: 1px solid $base-border-color;
    border-top-left-radius: $base-border-radius + 3;
    border-bottom-left-radius: $base-border-radius + 3;
    box-shadow: 0 0 50px 0 rgba(82, 63, 105, 0.15);
    transform: translateY(-50%);

    > li {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px 10px 10px;
        margin: 0;
        list-style: none;

        &:nth-child(2) {
            [class*='ri-'] {
                animation: rotate 6s linear infinite;
            }
        }

        $colors: (
            1: #3698fd,
            2: #1bc3bb,
            3: #faa500,
            4: #b37feb,
            5: #ef4c5d,
        );

        @each $key, $color in $colors {
            &:nth-child(#{$key}) {
                a {
                    color: $color;
                    background: mix($base-color-white, $color, 90%);
                    transition: color 0.15s ease, background-color 0.15s ease,
                    border-color 0.15s ease, box-shadow 0.15s ease,
                    -webkit-box-shadow 0.15s ease;

                    &:hover {
                        color: $base-color-white;
                        background: $color;
                    }
                }
            }
        }

        a {
            display: inline-block;
            width: 60px;
            height: 60px;
            padding-top: 10px;
            text-align: center;
            background: #f6f8f9;
            border-radius: $base-border-radius + 3;

            p {
                padding: 0;
                margin: 0;
                overflow: hidden;
                font-size: $base-font-size-small;
                line-height: 25px;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>
